/*
 * @Author: Await
 * @Date: 2025-05-06 17:30:35
 * @LastEditors: Await
 * @LastEditTime: 2025-05-06 17:30:35
 * @Description: 主题提示框配置组件
 */
import React from 'react';
import {
  Row,
  Col,
  Typography,
  ColorPicker,
  Divider,
  InputNumber,
  Select,
  Card,
  Tooltip,
  Slider,
} from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import type { ThemeConfig } from '../../../types/chartTypes';

const { Title, Text } = Typography;
const { Option } = Select;

interface TooltipConfigProps {
  value: ThemeConfig;
  onChange: (newValue: any) => void;
}

/**
 * 主题提示框配置组件
 * 配置提示框的样式
 */
const TooltipConfig: React.FC<TooltipConfigProps> = ({ value, onChange }) => {
  // 初始化提示框配置
  const tooltipConfig = value.tooltip || {
    backgroundColor: 'rgba(50, 50, 50, 0.7)',
    borderColor: '#333',
    borderWidth: 0,
    padding: 5,
    textStyle: {
      color: '#fff',
    },
  };

  // 更新普通配置
  const updateTooltipConfig = (key: string, val: any) => {
    onChange({
      ...value,
      tooltip: {
        ...tooltipConfig,
        [key]: val,
      },
    });
  };

  // 更新文字样式
  const updateTextStyle = (key: string, val: any) => {
    onChange({
      ...value,
      tooltip: {
        ...tooltipConfig,
        textStyle: {
          ...tooltipConfig.textStyle,
          [key]: val,
        },
      },
    });
  };

  // 解析背景色的透明度
  const parseBackgroundOpacity = () => {
    const bgColor = tooltipConfig.backgroundColor || 'rgba(50, 50, 50, 0.7)';
    if (bgColor.startsWith('rgba')) {
      const match = bgColor.match(/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)/);
      if (match) {
        return parseFloat(match[4]);
      }
    }
    return 0.7; // 默认透明度
  };

  // 更新背景色，保持透明度
  const updateBackgroundColor = (hexColor: string) => {
    const opacity = parseBackgroundOpacity();
    const { r, g, b } = hexToRgb(hexColor);
    const rgbaColor = `rgba(${r}, ${g}, ${b}, ${opacity})`;
    updateTooltipConfig('backgroundColor', rgbaColor);
  };

  // 更新背景透明度，保持颜色
  const updateBackgroundOpacity = (opacity: number) => {
    const bgColor = tooltipConfig.backgroundColor || 'rgba(50, 50, 50, 0.7)';
    if (bgColor.startsWith('rgba')) {
      const match = bgColor.match(/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)/);
      if (match) {
        const r = match[1];
        const g = match[2];
        const b = match[3];
        updateTooltipConfig('backgroundColor', `rgba(${r}, ${g}, ${b}, ${opacity})`);
        return;
      }
    }
    
    // 如果当前背景色不是rgba格式，则转换为rgba
    const { r, g, b } = hexToRgb(bgColor);
    updateTooltipConfig('backgroundColor', `rgba(${r}, ${g}, ${b}, ${opacity})`);
  };

  // 辅助函数: 十六进制颜色转为RGB
  const hexToRgb = (hex: string) => {
    hex = hex.replace(/^#/, '');
    const bigint = parseInt(hex, 16);
    const r = (bigint >> 16) & 255;
    const g = (bigint >> 8) & 255;
    const b = bigint & 255;
    return { r, g, b };
  };

  // 从rgba中提取十六进制颜色
  const extractHexFromRgba = (rgba: string) => {
    const match = rgba.match(/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)/);
    if (match) {
      const r = parseInt(match[1]);
      const g = parseInt(match[2]);
      const b = parseInt(match[3]);
      return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
    }
    return rgba;
  };

  return (
    <div className="theme-tooltip-config">
      <Card title="提示框样式" bordered={false}>
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <Text>
              背景颜色
              <Tooltip title="提示框的背景颜色">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Text>
            <div>
              <ColorPicker
                value={extractHexFromRgba(tooltipConfig.backgroundColor || 'rgba(50, 50, 50, 0.7)')}
                onChange={(color) => updateBackgroundColor(color.toHexString())}
                showText
              />
            </div>
          </Col>
          <Col span={8}>
            <Text>
              背景透明度
              <Tooltip title="提示框背景的透明度">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Text>
            <div>
              <Slider
                value={parseBackgroundOpacity()}
                onChange={updateBackgroundOpacity}
                min={0}
                max={1}
                step={0.05}
                style={{ width: '100%' }}
              />
            </div>
          </Col>
          <Col span={8}>
            <Text>
              内边距
              <Tooltip title="提示框内容的内边距">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Text>
            <InputNumber
              value={tooltipConfig.padding || 5}
              onChange={(val) => updateTooltipConfig('padding', val)}
              min={0}
              max={20}
              style={{ width: '100%' }}
            />
          </Col>
        </Row>

        <Divider style={{ margin: '16px 0' }} />

        <Row gutter={[16, 16]}>
          <Col span={8}>
            <Text>
              边框颜色
              <Tooltip title="提示框的边框颜色">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Text>
            <div>
              <ColorPicker
                value={tooltipConfig.borderColor || '#333'}
                onChange={(color) => updateTooltipConfig('borderColor', color.toHexString())}
                showText
              />
            </div>
          </Col>
          <Col span={8}>
            <Text>
              边框宽度
              <Tooltip title="提示框的边框宽度，设为0则无边框">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Text>
            <InputNumber
              value={tooltipConfig.borderWidth || 0}
              onChange={(val) => updateTooltipConfig('borderWidth', val)}
              min={0}
              max={10}
              style={{ width: '100%' }}
            />
          </Col>
          <Col span={8}>
            <Text>
              圆角半径
              <Tooltip title="提示框的圆角半径">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Text>
            <InputNumber
              value={tooltipConfig.borderRadius || 4}
              onChange={(val) => updateTooltipConfig('borderRadius', val)}
              min={0}
              max={20}
              style={{ width: '100%' }}
            />
          </Col>
        </Row>

        <Divider style={{ margin: '16px 0' }} />

        <Row gutter={[16, 16]}>
          <Col span={24}>
            <Title level={5}>文字样式</Title>
          </Col>
          <Col span={8}>
            <Text>
              字体颜色
              <Tooltip title="提示框文字的颜色">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Text>
            <div>
              <ColorPicker
                value={tooltipConfig.textStyle?.color || '#fff'}
                onChange={(color) => updateTextStyle('color', color.toHexString())}
                showText
              />
            </div>
          </Col>
          <Col span={8}>
            <Text>
              字体大小
              <Tooltip title="提示框文字的大小">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Text>
            <InputNumber
              value={tooltipConfig.textStyle?.fontSize || 14}
              onChange={(val) => updateTextStyle('fontSize', val)}
              min={10}
              max={24}
              style={{ width: '100%' }}
            />
          </Col>
          <Col span={8}>
            <Text>
              字体系列
              <Tooltip title="提示框文字的字体系列">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Text>
            <Select
              value={tooltipConfig.textStyle?.fontFamily || 'sans-serif'}
              onChange={(val) => updateTextStyle('fontFamily', val)}
              style={{ width: '100%' }}
            >
              <Option value="sans-serif">Sans-serif</Option>
              <Option value="serif">Serif</Option>
              <Option value="monospace">Monospace</Option>
              <Option value="Arial">Arial</Option>
              <Option value="Microsoft YaHei">微软雅黑</Option>
            </Select>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default TooltipConfig;